<template>
	<view>
		<view class="custom-navbar" :style="{'height':capsuleTop}">
			<view class="custom-navbar-title">
				订单中心
			</view>

			<image class="custom-close-img" :src="clsoeImg" mode="" @click="close"></image>
		</view>

		<view class="content" :style="{'margin-top':capsuleTop}">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			<view class="conten-top" v-for="(item,index) in cardlist" :key="index">
				<view class="">
					<view class="top-text">
						订单名称：{{item.name}}
					</view>
					<view class="top-text">
						订单金额：{{item.price}}
					</view>
					<!-- <view class="top-text">
						订单状态：{{item.state == 0 ? '' :' '}}
					</view> -->
					<view class="top-text">
						订单时间： {{item.time}}
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		log
	} from 'util';

	export default {
		components: {

		},
		data() {
			return {
				capsuleTop: uni.getMenuButtonBoundingClientRect().top + 35.5 + 'px',
				popupShow: false,
				clsoeImg: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/money/close.png',
				list: [{
					type: '',
					name: '全部订单'
				}, {
					type: '1',
					name: '线上订单'
				}, {
					type: '2',
					name: '线下订单',
				}],
				cardlist: [],
				current: 0,
				type: '',
			}
		},

		onShow() {
			this.index();
		},
		watch: {

		},
		methods: {
			async index(types) {
				let qyery = {
					type: types
				}
				try {
					let data = await new this.Request(this.Urls.m().order_on, qyery).modepost();
					this.cardlist = data.data.list;
				} catch (e) {
					console.log(e, 'e')

				}

			},
			change(index) {
				this.current = index;
				this.type = this.list[index].type;
				this.index(this.type);
			},
			btn() {
				uni.showToast({
					title: "正在开发中，敬请期待！",
					icon: 'none',
					mask: true,
				});
			},
			close() {
				uni.navigateBack();
			},
		}

	}
</script>

<style lang="scss" scoped>
	.custom-navbar {
		// display: flex;
		// justify-content: center;
		// align-items: center;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
		text-align: center;
		font-size: 44rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: 500;
		color: #333333;
		/* 导航栏高度 */
		background-image: linear-gradient(to right, #caecf8 0%, #fff 100%);
		/* 渐变色 */
		/* 其他样式 */
	}

	.custom-navbar-title {
		width: 100%;
		position: absolute;
		bottom: 10rpx;
		text-align: center;
	}

	.custom-top {
		width: 100%;
	}

	.content {
		overflow: hidden;
		width: 100%;
		height: 100vh;
		background: #F3F4F9;

	}

	.conten-top {
		padding: 20rpx 0 30rpx;
		box-sizing: border-box;
		overflow: hidden;
		margin: 30rpx auto 0;
		background: #fff;
		width: 80%;
		border-radius: 30rpx;
		border: 1px solid rgba(0, 0, 0, 0.1);
		box-shadow: 0rpx 9rpx 14rpx 0rpx rgba(134, 134, 134, 0.25);

	}

	.top-text {
		margin-top: 10rpx;
		padding: 0 59rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000;
	}

	.btn {
		margin: 117rpx auto 0;
		width: 373rpx;
		height: 79rpx;
		background: #34C8E8;
		border-radius: 40rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		text-align: center;
		line-height: 79rpx;
	}

	.custom-close-img {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		bottom: 20rpx;
		left: 30rpx;
		color: #000000;
	}
</style>